<!-- 我的消息 -->
<template>
  <div
    id="message"
    :style="{
      backgroundColor: bgcColor.color === '#000' ? '#fff' : 'rgb(33, 33, 48)',
      color: bgcColor.color === '#000' ? 'rgb(33, 33, 48)' : '#fff'
    }"
  >
    <el-row :gutter="30" justify="space-between">
      <!-- 面板 -->
      <el-col :md="7" :lg="5">
        <div class="panel">
          <div class="title public">
            <div class="tit">
              <i class="iconfont icon-shoujianxiang"></i>
              <span>收件箱</span>
            </div>
            <div
              class="num"
              v-if="
                userInfo.systemUnread +
                userInfo.festivalUnread +
                userInfo.appointmentUnread
              "
            >
              {{
                userInfo.systemUnread +
                userInfo.festivalUnread +
                userInfo.appointmentUnread
              }}
            </div>
          </div>
          <div
            class="lists"
            :style="{
              borderColor:
                bgcColor.color === '#000' ? 'rgb(240, 236, 236)' : '#6a707e'
            }"
          >
            <router-link
              to="/admin/message/system"
              class="list public"
              :style="{
                borderColor:
                  bgcColor.color === '#000' ? 'rgb(240, 236, 236)' : '#6a707e'
              }"
            >
              <div class="tit">
                <i class="iconfont icon-news"></i>
                <span>系统消息</span>
              </div>

              <template v-if="userInfo.systemUnread >= 1">
                <div class="num">{{ userInfo.systemUnread }}</div>
              </template>
            </router-link>
            <router-link
              to="/admin/message/festival"
              class="list public"
              :style="{
                borderColor:
                  bgcColor.color === '#000' ? 'rgb(240, 236, 236)' : '#6a707e'
              }"
            >
              <div class="tit">
                <i class="iconfont icon-songzhufu"></i>
                <span>节日祝福</span>
              </div>
              <template v-if="userInfo.festivalUnread >= 1">
                <div class="num">{{ userInfo.festivalUnread }}</div>
              </template>
            </router-link>
            <router-link
              to="/admin/message/order"
              class="list public"
              :style="{
                borderColor:
                  bgcColor.color === '#000' ? 'rgb(240, 236, 236)' : '#6a707e'
              }"
            >
              <div class="tit">
                <i class="iconfont icon-huodongtongzhi-"></i>
                <span>用户预约</span>
              </div>
              <template v-if="userInfo.appointmentUnread >= 1">
                <div class="num">{{ userInfo.appointmentUnread }}</div>
              </template>
            </router-link>
            <router-link
              to="/admin/message/start"
              class="list public"
              :style="{
                borderColor:
                  bgcColor.color === '#000' ? 'rgb(240, 236, 236)' : '#6a707e'
              }"
            >
              <div class="tit">
                <i class="iconfont icon-xingbiao"></i>
                <span>星标信息</span>
              </div>
              <template v-if="userInfo.startUnread >= 1">
                <div class="num">{{ userInfo.startUnread }}</div>
              </template>
            </router-link>
          </div>
        </div>
      </el-col>
      <el-col :md="17" :lg="18">
        <router-view></router-view>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { computed, watch } from 'vue'
import { useStore } from 'vuex'
import type { UserInfoVuexTypes } from '@/server/serve/api_admintor'

const store = useStore()

// 背景主题
const bgcColor = computed(() => store.state.Background)

// 获取用户数据
const userInfo = computed({
  get: () => store.state.userInfo as UserInfoVuexTypes,
  set: () => {}
})
watch(
  () => userInfo.value,
  (newVal) => {
    userInfo.value = newVal
  }
)
</script>

<style scoped lang="less">
#message {
  border-radius: 16px;
  padding: 10px 15px;
  // 面板
  .panel {
    margin-top: 20px;
    transition: all 0.3s;

    .title {
      height: 50px;
      background-color: #f56c6c;
      border-top-right-radius: 16px;
      border-top-left-radius: 16px;
      overflow: hidden;
      color: #fff;
    }
    .lists {
      border: 1px solid rgb(240, 236, 236);
      border-bottom-left-radius: 16px;
      border-bottom-right-radius: 16px;
      overflow: hidden;
      .list {
        cursor: pointer;
        &.router-link-exact-active {
          i {
            color: #f56c6c;
          }
          span {
            color: #f56c6c;
          }
        }
        i {
          color: #cccccc;
        }
        span {
          color: #6a707e;
        }
      }
    }
    // 公共样式
    .public {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 15px;
      font-size: 13px;
      user-select: none;
      border-bottom: 1px solid rgb(240, 236, 236);
      &:nth-last-child(1) {
        border-bottom: none;
      }

      .tit {
        display: flex;
        align-items: centers;
        i {
          margin-right: 12px;
          font-size: 18px;
        }
      }
      .num {
        font-weight: 600;
        padding: 3px 8px;
        color: #fff;
        background-color: #f56c6c;
        border-radius: 16px;
      }
    }
  }
}
</style>
